<template>
  <button type="button" @click="toggle">显示 | 隐藏</button>
  <transition name="lhz">
    <div class="box" :class="{me:isMe}" @mouseenter="isMe=!isMe" @mouseleave="isMe=!isMe" v-show="isShow"></div>
  </transition>
</template>

<script>
export default {
  name: "LhzB",
  data() {
    return {
      isMe: false,
      isShow: true,
    }
  },
  methods: {
    toggle() {
      this.isShow = !this.isShow;
    }
  }
}
</script>

<style scoped>
.box {
  width: 450px;
  height: 450px;
  background-color: #00aa00;
  text-align: center;
  position: absolute;
  top: 100px;
  left: 100px;
  transition: 500ms;
}

.me {
  transform: rotate(45deg);
}
/* 进入之前 */
.lhz-enter-from{
  width: 0px;
  height: 0px;
}
/* 进入中 */
.lhz-enter-active{
  transition: 3s all ease;
}
/* 进入完成 */
.lhz-enter-to{
  width: 450px;
  height: 450px;
}
/* 离开之前 */
.lhz-leave-from{
  width: 450px;
  height: 450px;
}
/* 离开中 */
.lhz-leave-active{
  transition: 3s all ease;
}
/* 离开完成 */
.lhz-leave-to{
  width: 0px;
  height: 0px;
}
</style>